<template>
  <v-card>
    <v-layout  class="px-3 pb-2">
      <v-flex xs2>
        <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
      </v-flex>
      <v-spacer/>
      <v-flex xs2>
        <v-text-field label="搜索" hidden-detail append-icon="search"  v-model="key"/>
      </v-flex>
    </v-layout>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image" alt=""></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-btn icon disabled>
            <v-icon>edit</v-icon>
          </v-btn>
          <v-btn icon disabled>
            <v-icon>delete</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>新增品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
         <my-brand-form/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  // 导入自定义的表单组件
  import MyBrandForm from './MyBrandForm'
  import BrandForm from "./BrandForm";

  export default {
    name: "MyBrand",
    components:{
      BrandForm,
      MyBrandForm
    },
    data(){
      return{
        headers:[
          { text: "品牌id",value: "id",align:'center',sortable: true},
          { text: "品牌名称",value: "name",align:'center',sortable: false},
          { text: "品牌LOGO",value: "image",align:'center',sortable: false},
          { text: "品牌首字母",value: "letter",align:'center',sortable: true},
          { text: "操作", align:'center',sortable: true}
        ],
        brands: [],//初始化和品牌数据 列表形式
        pagination: {},
        totalBrands: 0, //总条数  分页用
        loading: false,
        key: "" ,//搜索条件，
        show: false,

      }
    },
    created() {
      //应该从后台查询
      //异步查询工具axios
      //此处传的路径为相对路径，前面路劲axios前面有basrurl  基础路径
      //axios.get("",{}).then(resp =>{}) 写好http.js（自己定义的配置文件）后 我们可以这样写
      //参数 分页 page  排序  搜索
      //this.loading= true;
      //去后台查询
      this.loadBrand();
    },
    //监控  执行函数
    watch:{
      key(){
        this.loadBrand();
      },
      pagination: {
        deep: true,
        handler(){
          this.loadBrand();
        }
      },

    },
    //封装的方法
    methods:{
      loadBrand(){
        this.loading=true;
        this.$http.get("/item/brand/page",{
          params:{
            page: this.pagination.page,
            rows: this.pagination.rowsPerPage,
            sortBy: this.pagination.sortBy,
            desc: this.pagination.descending,
            key:this.key ,
          }
        }).then(resp =>{
          //console.log(resp)
          this.brands=resp.data.items;
          this.totalBrands = resp.data.total;
          //关闭进度条
          this.loading = false;
        })
      },
      addBrand(){
        // 控制弹窗可见：
        this.show = true;
      },
      closeWindow(){
        this.show= false;
      }
    }
  }
</script>

<style scoped>

</style>
